<template>
  <div class="app-container">
    <div class="flex-ai-c">
      <el-button
        v-permission="[
          'admin',
          'punish/add',
        ]"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="addItem = true"
      >
        add
      </el-button>
    </div>
    <div class="flex-ai-c" style="margin-top: 10px">
      <div class="flex-ai-c" style="flex-wrap: wrap;">
        <span
          class="span-label"
          style="margin-left: 10px; margin-right: 10px"
        >User:</span>
        <el-input
          v-model="crud.query.userIdOrName"
          size="small"
          clearable
          placeholder="Please enter Username/JoJo ID"
          style="width: 300px"
        />
        <span style="margin-left: 10px" />
        <span
          class="span-label"
          style="margin-left: 10px; margin-right: 10px"
        >Violation:</span>
        <el-cascader
          v-model="crud.query.violationTemp"
          :options="ViolationList"
          placeholder="Please select"
          style="width: 350px"
        />
        <span style="margin-left: 10px" />
        <span
          class="span-label"
          style="margin-left: 10px; margin-right: 10px;white-space: nowrap;"
        >Join Time:</span>
        <el-date-picker
          v-model="crud.query.createTime"
          :default-time="['00:00:00','23:59:59']"
          type="datetimerange"
          range-separator=":"
          size="small"
          class="ml-20"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="Start date"
          end-placeholder="End date"
        />
        <span style="margin-left: 10px" />
        <span
          class="span-label"
          style="margin-left: 10px; margin-right: 10px;white-space: nowrap;"
        >duration:</span>
        <el-select v-model="crud.query.durationTimeTemp" placeholder="Please select">
          <el-option
            v-for="item in DurationList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span style="margin-left: 10px"><rrOperation /></span>
      </div>
    </div>
    <!--表单渲染-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="cancelCU"
      :visible.sync="addItem"
      :title="'Talent Rating'"
      width="570px"
    >
      <el-form
        ref="form"
        :inline="true"
        :rules="rules"
        :model="form"
        size="small"
        label-width="150px"
      >
        <el-form-item label="User" prop="targetUserId">
          <el-input v-model="form.targetUserId" placeholder="Please enter JoJo ID" :disabled="crud.status.edit == 1" />
        </el-form-item>
        <el-form-item label="Violation reason" prop="violationTemp">
          <el-cascader
            v-model="form.violationTemp"
            placeholder="Please select"
            :options="ViolationListLimit"
          />
        </el-form-item>
        <el-form-item label="Penalty result" prop="punishType">
          <el-select v-model="form.punishType" placeholder="Please select">
            <el-option
              v-for="item in punishTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="duration" prop="durationTime">
          <el-select v-model="form.durationTime" placeholder="Please select">
            <el-option
              v-for="item in DurationListLimit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancelCU">cancle</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="beforeSubmit"
        >ok</el-button>
      </div>
    </el-dialog>
    <el-table
      ref="table"
      v-loading="crud.loading"
      highlight-current-row
      style="width: 100%"
      :data="crud.data[crud.listName]"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column prop="id" label="id" />
      <el-table-column label="Join Time">
        <template slot-scope="scope">
          {{ moment(scope.row.punishTime).format("MM/DD/YYYY HH:MM:SS") }}
        </template>
      </el-table-column>
      <el-table-column label="Violating user">
        <template slot-scope="scope">
          <span>{{ scope.row.targetNickname }} {{ scope.row.targetUserId?'(' + scope.row.targetUserId + ')': '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="violation">
        <template slot-scope="scope">
          <span>{{ scope.row.violation }} </span>
        </template>
      </el-table-column>
      <el-table-column label="Duration">
        <template slot-scope="scope">
          <span>{{ computedDurationTime(scope.row.durationTime) }} </span>
        </template>
      </el-table-column>
      <el-table-column label="Release date">
        <template slot-scope="scope">
          {{ moment(scope.row.releaseTime).format("MM/DD/YYYY HH:MM:SS") }}
        </template>
      </el-table-column>
      <el-table-column label="Handler">
        <template slot-scope="scope">
          <span>{{ scope.row.handlerNickname }} {{ scope.row.handlerUserId?'(' + scope.row.handlerUserId + ')': '/' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="Operation ">
        <template slot-scope="scope">
          <OptionsButtonVue :row="scope.row" />
        </template>
      </el-table-column>
    </el-table>
    <pagination />
  </div>
</template>

<script>
import { punishAdd as add } from '@/api/operations/user/punishList'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import moment from 'moment'
import { parseTimeByUTC as parseTime } from '@/utils/index'
import { ViolationList, punishTypeList, DurationList, DurationListLimit, ViolationListLimit, errStrFunc } from '../data'
import OptionsButtonVue from './optionsButton.vue'
const defaultForm = {
  punishType: 4,
  targetUserId: null,
  violationTemp: [],
  durationTime: null
}
export default {
  name: 'Anchor',
  cruds() {
    return CRUD({
      title: 'Add penalty',
      url: 'admin/user/punish/list',
      crudMethod: { add },
      optShow: {
        add: true,
        reset: true,
        opts: true
      },
      query: {
        punishType: 4,
        durationTimeTemp: -1,
        violationTemp: -1
      }
    })
  },
  components: { pagination, rrOperation, OptionsButtonVue },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      dialogTableVisible: false,
      permission: {
        add: ['admin', 'actor/level/save']
      },
      rules: {
        targetUserId: [{ required: true, trigger: 'blur', message: 'Please enter JoJo ID' }],
        punishType: [{ required: true, trigger: 'blur', message: 'Please select Penalty result' }],
        violationTemp: [{ required: true, trigger: 'blur', message: 'Please select Violation reason' }],
        durationTime: [{ required: true, trigger: 'blur', message: 'Please select duration' }]
      },
      ViolationList,
      punishTypeList,
      DurationList,
      ViolationListLimit,
      DurationListLimit,
      addItem: false,
      visible: false
    }
  },
  methods: {
    parseTime,
    moment,
    errStrFunc,
    computedDurationTime(time) {
      const list = DurationList.filter((item) => item.value === time) || []
      return list.length > 0 ? list[0].label : '/'
    },
    cancelCU() {
      this.addItem = false
      this.crud.resetForm()
    },
    addFunc() {
      add({ ...this.crud.form }).then((res) => {
        if (res.errorCode === 0) {
          const { precessResult } = res.data
          const str = errStrFunc(precessResult, this.crud.form.targetUserId)
          if (precessResult === 1) {
            this.$message({
              message: 'success',
              type: 'success'
            })
            this.crud.resetForm()
            this.addItem = false
            this.crud.refresh()
          } else {
            this.$message.error(str)
          }
        }
      })
    },
    beforeSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.crud.form.violation = this.crud.form.violationTemp.join(',')
          this.addFunc()
        } else {
          return false
        }
      })
    },
    [CRUD.HOOK.beforeRefresh](crud) {
      if (crud.query.durationTimeTemp !== -1) {
        crud.query.durationTime = crud.query.durationTimeTemp
      } else {
        delete crud.query.durationTime
      }
      if (crud.query.violationTemp !== -1 && crud.query.violationTemp[0] !== -1) {
        crud.query.violation = crud.query.violationTemp
      } else {
        delete crud.query.violation
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.link {
  cursor: pointer;
  color: #409eff;
}
.flex {
  display: flex;
}
.flex-ai-c {
  display: flex;
  align-items: center;
}
.span-label {
  font-size: 14px;
  color: #606266;
  font-weight: 600;
}
</style>
